<template>
    <div>
      <a-col  :span='6'
              v-if="item.type == 'date'"
              class='col-item'
      >
        <span class='label'>{{item.label}}:</span>
        <a-range-picker @change="onChange" v-model='item.date'>
        </a-range-picker>
      </a-col>
      <a-col  :span='6'
              v-if="item.type == 'input'"
              class='col-item'
      >
        <span class='label'>{{item.label}}:</span>
        <a-input v-model='item.val'
                 :id='item.value'
                 :placeholder="'请输入' + item.label"
                 @change='changeItem'
        >
        </a-input>
      </a-col>
<!--      <a-col :span='6'
             v-if="item.type == 'select-multiple' && item.url"
             class='col-item'>
        <span style='margin-right: 6px;width: 150px;text-align: right;line-height: 2;'>{{item.label}}:</span>
        <vxe-pulldown ref="xDown" transfer>
          <template #default>
            <vxe-input v-model="item.showName" suffix-icon="fa fa-search"
                       :placeholder="'请选择' + item.label"
                       @keyup="keyupEvent" @focus="focusEvent"
                       @change='changInput'
                       @suffix-click="suffixClick">
            </vxe-input>
          </template>
          <template #dropdown>
            <div class="my-dropdown4">
              <a-input-search placeholder="请输入要查询的内容" enter-button @search="onSearch" v-model='queryParam.codeOrName'/>
              <v-table :toolbar="false"
                       bordered
                       ref="table"
                       :data="loadData"
                       :tableColumn="item.tableColumns"
                       :pageSize="10"
                       :height="200"
                       :showPagination="item.showPagination"
                       :cell-click='cellClick'
              >
              </v-table>
            </div>
          </template>
        </vxe-pulldown>
      </a-col>-->
      <a-col :span='6'
             v-if="item.type == 'select-multiple' && item.options"
             class='col-item'>
        <span style='margin-right: 6px;width: 150px;text-align: right;line-height: 2;'>{{item.label}}:</span>
        <a-select
          show-search
          :placeholder="'请选择' + item.label"
          v-model='item.val'
          option-filter-prop="children"
          style="width: 300px"
          :filter-option="filterOption"
          @change="handleChange"
        >
          <a-select-option :value="arr.code"
                           v-for="(arr, index) in item.options"
                           :key='index'>
            {{arr.name}}
          </a-select-option>
        </a-select>
      </a-col>
    </div>
</template>

<script>
  import dayjs from 'dayjs';
  import moment from 'moment';

  export default {
    name: 'commonSearch',
    props:{
      item:Object,
    },
    data() {
      return{
        value: '',
        loading: false,
        endOpen: false,
        queryParam:{
          codeOrName:''
        },
        cellClick: res => {
          let key = this.item.code
          let showValue = this.item.show
          this.item.showName = res.row[showValue]
          this.item.val = res.row[key]
          this.$emit('changeNew', this.item)
          this.$refs.xDown.togglePanel()
        },
      }
    },
    watch:{
      item(newName, oldName) {
        this.item = newName
      }
    },
    mounted() {
      if(this.item.params){
        this.queryParam = Object.assign(this.queryParam, this.item.params)
        this.onSearch()
      }
    },
    methods:{
      initParams(){
        if(this.item.params){
          this.queryParam = Object.assign(this.queryParam, this.item.params)
          this.onSearch()
        }
      },
      changInput() {
        this.item.val = this.item.showName
        this.$emit('changeNew', this.item)
      },
      focusEvent () {
        this.$refs.xDown.showPanel()
        this.queryPage()
      },
      keyupEvent () {
        this.loading = true
      },
      suffixClick () {
        this.$refs.xDown.togglePanel()
      },
      handleStartOpenChange(open) {
        if (!open) {
          this.endOpen = true;
        }
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      handleEndOpenChange(open) {
        this.endOpen = open;
      },
      queryPage (bool = false) {
        this.$refs.table.refresh(bool)
      },
      ok(e) {
        let date = moment(e._d).format("YYYY-MM-DD")
        this.item.val = date
        this.$emit('changeNew', this.item)
      },
      changeItem(){
        this.$emit('changeNew', this.item)
      },
      onChange(e) {
        if(e.length > 0){
          let startDate = moment(e[0]).format("YYYY-MM-DD")
          let endDate = moment(e[1]).format("YYYY-MM-DD")
          this.item.val = startDate.toString() + ',' + endDate.toString()
        }else{
          this.item.val = ''
        }
        this.$emit('changeNew', this.item)
      },
      handleChange(value) {
        this.$emit('changeNew', this.item)
      },
      onSearch(value) {
        if(this.item.params){
          this.queryParam = Object.assign(this.queryParam, this.item.params)
        }
        this.queryPage()
        this.queryParam.codeOrName = ''
      }
    }
  }
</script>

<style scoped>
  .col-item{
    display: flex;
    margin-bottom: 5px;
    height: 40px;
    position: relative;
  }
  .clean{
    margin-left: 10px;
  }
  .my-dropdown4 {
    width: 600px;
    height: 300px;
    background-color: #fff;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  }
  .label{
    margin-right: 6px;
    width: 180px;
    text-align: right;
    line-height: 2;
  }
  .is--suffix{
     width: 100%;
}
  >>> .ant-btn-primary{
    background: #f8f8f9;
    border:solid 1px #e8eaec !important;
    color: #c6c6c7;
  }
  >>> .ant-row{
    height: 40px;
  }
</style>